
<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="${root}assets/json/jsoneditor.css"/>
    <link rel="icon" href="logo-small.png"/>

    <title>Flexi JSON Editor and Inspector</title>

    <style>
        body {
          padding: 0 70px;
        }
        #json {
          margin: 10px 10px 10px 32px;
          width: 50%;
          min-height: 70px;
        }
        h1 {
          font-family: Arial;
          color: #EBBC6E;
          text-align: center;
          text-shadow: 1px 1px 1px black;
          border-bottom: 1px solid gray;
          padding-bottom: 50px;
          width: 500px;
          margin: 20px auto;
        }
        h1 img {
          float: left;
        }
        h1 b {
          color: black;
          font-weight: normal;
          display: block;
          font-size: 12px;
          text-shadow: none;
        }

        #legend {
          display: inline;
          margin-left: 30px;
        }
        #legend h2 {
           display: inline;
           font-size: 18px;
           margin-right: 20px;
        }
        #legend a {
          color: white;
          margin-right: 20px;
        }
        #legend span {
          padding: 2px 4px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          color: white;
          font-weight: bold;
          text-shadow: 1px 1px 1px black;
          background-color: black;
        }
        #legend .string  { background-color: #009408; }
        #legend .array   { background-color: #2D5B89; }
        #legend .object  { background-color: #E17000; }
        #legend .number  { background-color: #497B8D; }
        #legend .boolean { background-color: #B1C639; }
        #legend .null    { background-color: #B1C639; }

        #expander {
          cursor: pointer;
          margin-right: 20px;
        }

        #footer {
          font-size: 13px;
        }

        #rest {
          margin: 20px 0 20px 30px;
        }
        #rest label {
          font-weight: bold;
        }
        #rest-callback {
          width: 70px;
        }
        #rest-url {
          width: 700px;
        }
        label[for="json"] {
          margin-left: 30px;
          display: block;
        }
        #json-note {
          margin-left: 30px;
          font-size: 12px;
        }

        .addthis_toolbox {
          position: relative;
          top: -10px;
          margin-left: 30px;
        }

        #disqus_thread {
          margin-top: 50px;
          padding-top: 20px;
          padding-bottom: 20px;
          border-top: 1px solid gray;
          border-bottom: 1px solid gray;
        }

    </style>

    
</head>

<body>

    
    <div id="editor" class="json-editor"></div>

    <label for="json">Or paste JSON directly here:</label>
    <p id="json-note">Note that you can edit your JSON directly in the textarea below.
        The JSON viewer will get updated when you leave the field.</p>
    <textarea id="json"></textarea><br/>

    <p id="footer">Copyright &copy; 2011-2013 David Durman (client IO, <a href="http://client.io">http://client.io</a>, org@client.io)</p>

    <script src="${root}assets/json/json2.js"></script>
    <script src="${root}assets/json/jquery.min.js"></script>
    <script src="${root}assets/json/jquery.jsoneditor.js"></script>
    <script>
    var json =[
        {
            "标题": "第一章：爱",
            "类型": "章节",
            "列表": [
                {
                    "标题": "第一章：爱",
                    "类型": "录播",
                    "链接": "http",
                    "描述": ""
                },
                {
                    "标题": "第一章：爱",
                    "类型": "文件",
                    "链接": "http",
                    "描述": ""
                },
                {
                    "标题": "第一章：爱",
                    "类型": "直播",
                    "链接": "http",
                    "描述": ""
                }
            ]
        },
        {
            "标题": "第二章：哈哈",
            "类型": "章节",
            "列表": [
                {
                    "标题": "第一章：爱",
                    "类型": "录播",
                    "链接": "http",
                    "描述": ""
                },
                {
                    "标题": "第一章：爱",
                    "类型": "文件",
                    "链接": "http",
                    "描述": ""
                },
                {
                    "标题": "第一章：爱",
                    "类型": "直播",
                    "链接": "http",
                    "描述": ""
                }
            ]
        }
    ];

    	function printJSON() {
    	    $('#json').val(JSON.stringify(json));

    	}

    	function updateJSON(data) {
    	    json = data;
    	    printJSON();
    	}

    	function showPath(path) {
    	    $('#path').text(path);
    	}

    	$(document).ready(function() {

    	    $('#rest > button').click(function() {
    	        var url = $('#rest-url').val();
    	        $.ajax({
    	            url: url,
    	            dataType: 'jsonp',
    	            jsonp: $('#rest-callback').val(),
    	            success: function(data) {
    	                json = data;
    	                $('#editor').jsonEditor(json, { change: updateJSON, propertyclick: showPath });
    	                printJSON();
    	            },
    	            error: function() {
    	                alert('Something went wrong, double-check the URL and callback parameter.');
    	            }
    	        });
    	    });

    	    $('#json').change(function() {
    	        var val = $('#json').val();

    	        if (val) {
    	            try { json = JSON.parse(val); }
    	            catch (e) { alert('Error in parsing json. ' + e); }
    	        } else {
    	            json = {};
    	        }
    	        
    	        $('#editor').jsonEditor(json, { change: updateJSON, propertyclick: showPath });
    	    });

    	    $('#expander').click(function() {
    	        var editor = $('#editor');
    	        editor.toggleClass('expanded');
    	        $(this).text(editor.hasClass('expanded') ? 'Collapse' : 'Expand all');
    	    });
    	    
    	    printJSON();
    	    $('#editor').jsonEditor(json, { change: updateJSON, propertyclick: showPath });
    	});



    </script>
</body>
</html>
